<!DOCTYPE html>
<html>
    <head>
        <title>Test Orientation</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="HandheldFriendly" content="True">
        <meta id="viewport" name="viewport" content="width=device-width">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="default" />
        <link rel="apple-touch-startup-image" href="images/splash.jpg" />  
        <script type="text/JavaScript" src="JQ.js"></script>
        <script type="text/JavaScript" src="scripts/crombsGPS.js"></script>
    </head>
    <body>
        <div id="mainview">
            <div id="map"><img width="360000" height="180000" src="images/map.jpg"></div>
        </div>
        <p id="debug"></p>
        <script>
            $("#mainview").css("width","400px");
            $("#mainview").css("height","400px");
            $("#mainview").css("overflow","hidden");
            $("#mainview").css("background-color","#FFAAAA");
            $("#map").css("background-color","#FFFFFF");
            $("#map").css("position","relative");
            
            var x=0;
            var y =0;
            setInterval(updateMapPosition,500);
            function updateMapPosition(){
                x = ((-72+Math.random()));
                y = (46+Math.random());
                
                $("#map").css("left",x+"px");
                $("#map").css("top",y+"px");
                
                console.log("LEFT: " + x + ", TOP: " + y);
                document.getElementById("debug").innerHTML="LEFT: " + x + ", TOP: " + y;
            }
        </script>
    </body>
</html>
